<template>
  <div class="health-record-container">
    <!-- 顶部用户健康概览 -->
    <div class="overview">
      <el-avatar :size="60" :src="user.avatar || '/default-avatar.png'" />
      <div class="user-info">
        <div class="nickname">{{ user.username }}</div>
        <div class="health-score">
          健康分：<span class="score">{{ healthScore }}</span>
        </div>
        <el-tag :type="healthStatusType">{{ healthStatusText }}</el-tag>
      </div>
    </div>

    <!-- 健康检测模块 -->
    <el-card class="module-card" shadow="hover">
      <template #header>
        <div class="module-header">
          <el-icon><Monitor /></el-icon>
          <span>健康检测</span>
          <el-button type="text" @click="goToDetail('healthcheck')">查看更多</el-button>
        </div>
      </template>
      <HealthCheckModule />
    </el-card>

    <!-- 慢病管理模块 -->
    <el-card class="module-card" shadow="hover">
      <template #header>
        <div class="module-header">
          <el-icon><Warning /></el-icon>
          <span>慢病管理</span>
          <el-button type="text" @click="goToDetail('chronic')">查看更多</el-button>
        </div>
      </template>
      <ChronicDiseaseModule />
    </el-card>

    <!-- 体质辨识模块 -->
    <el-card class="module-card" shadow="hover">
      <template #header>
        <div class="module-header">
          <el-icon><UserFilled /></el-icon>
          <span>体质辨识</span>
          <el-button type="text" @click="goToDetail('tcm-constitution')">查看更多</el-button>
        </div>
      </template>
      <TcmConstitutionModule />
    </el-card>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { Monitor, Warning, UserFilled } from '@element-plus/icons-vue'
import HealthCheckModule from '../components/HealthCheckModule.vue'
import ChronicDiseaseModule from '../components/ChronicDiseaseModule.vue'
import TcmConstitutionModule from '../components/TcmConstitutionModule.vue'
import { getUserInfoApi } from '../api/user'

const router = useRouter()
const user = ref({ avatar: '', username: '' })
const healthScore = ref(85)
const healthStatusType = ref('success')
const healthStatusText = ref('健康良好')

const goToDetail = (type) => {
  router.push(`/${type}`)
}

onMounted(async () => {
  const res = await getUserInfoApi()
  if (res && res.data) user.value = res.data
  // 这里可以根据实际健康数据动态设置分数和状态
})
</script>

<style scoped>
.health-record-container {
  max-width: 800px;
  margin: 0 auto;
  padding: 24px;
}
.overview {
  display: flex;
  align-items: center;
  background: linear-gradient(90deg, #e0f7fa 0%, #b2ebf2 100%);
  border-radius: 16px;
  padding: 20px;
  margin-bottom: 24px;
}
.user-info {
  margin-left: 20px;
}
.nickname {
  font-size: 20px;
  font-weight: bold;
}
.health-score {
  margin: 8px 0;
  font-size: 16px;
}
.score {
  color: #67c23a;
  font-size: 22px;
  font-weight: bold;
}
.module-card {
  margin-bottom: 24px;
}
.module-header {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 18px;
  font-weight: 600;
}
</style> 